<template>
  <view class="search-container">
      <view class="search-bar">
        <input type="text" placeholder="请输入搜索关键词" v-model="searchValue" />
        <button class="cancel-button" @click.stop="cancelSearch">取消</button>
        <img src="../../static/1_搜索.png" class="search-icon" @click="onSearch" />
      </view>
  
      <!-- 搜索历史记录 -->
      <view class="search-history">
        <view class="history-title">搜索历史</view>
        <view v-for="(item, index) in searchHistory" :key="index" class="history-item" @click="onHistorySearch(item)">
          {{ item }}
        </view>
        <button class="clear-history" @click="clearHistory">清除历史记录</button>
      </view>
  
      <!-- 搜索结果卡片 -->
      <view class="card-grid">
        <view v-for="(item, index) in services" :key="index" class="cct">
          <uni-card>
            <img :src="getYeupText(item)" class="iit" @click="tree" />
            <h3 class="primary">{{ getPrimaryText(item) }}</h3>
            <p class="money" @click="hyyl">{{ getMoney(item) }}元起预约</p>
          </uni-card>
        </view>
      </view>
    </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      searchValue: '',
      services: [],
      searchHistory: [],
    };
  },
  methods: {
	//金额跳转
	 hyyl(item){
	 	this.$router.push('/pages/booking/booking')
	 		},
	//图片跳转
	tree(item){
	 	this.$router.push('/pages/categoryy/categoryy')
	 	},
	  
    // 获取图片地址
    getYeupText(item) {
      return item.photo || '';
    },
    // 获取标题文本
    getPrimaryText(item) {
      return item.skills || '无标题';
    },
    // 获取金额文本
    getMoney(item) {
      return item.money || '无金额';
    },
	
    // 加载搜索历史
    loadSearchHistory() {
      const history = uni.getStorageSync('searchHistory');
      this.searchHistory = history ? history : [];
    },
    // 保存搜索历史
    saveSearchHistory(keyword) {
      if (!keyword) return;
      if (!this.searchHistory.includes(keyword)) {
        this.searchHistory.unshift(keyword);
        if (this.searchHistory.length > 10) this.searchHistory.pop();
        uni.setStorageSync('searchHistory', this.searchHistory);
      }
    },
    // 进行搜索
    async onSearch() {
      if (!this.searchValue.trim()) {
        uni.showToast({ title: '请输入搜索关键词', icon: 'none' });
        return;
      }

      this.saveSearchHistory(this.searchValue);
      console.log(this.searchValue);
      
      const res = await uni.request({
        url: 'http://localhost:8087/ry/profiles/queries/' + this.searchValue,
        method: 'get',
        header: {
          'Content-Type': 'application/json'
        }
      });
      
      this.services = res.data.data || [];
    },
    // 点击历史记录搜索
    onHistorySearch(keyword) {
      this.searchValue = keyword;
      this.onSearch();
    },
    // 取消搜索并返回上一页
    cancelSearch() {
      this.$router.back();
    },
    // 清除搜索框内容
    clearSearch() {
      this.searchValue = '';
      uni.showToast({
        title: '已清空搜索关键词',
        icon: 'none'
      });
    },
    // 清除历史记录
    clearHistory() {
      this.searchHistory = [];
      uni.removeStorageSync('searchHistory');
      uni.showToast({ title: '已清除历史记录', icon: 'none' });
    }
  },
  mounted() {
    this.loadSearchHistory();
  }
};
</script>

<style lang="scss" scoped>
  .search-container {
    padding: 15px;
  }

  .search-bar {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    background-color: #fff;
  }

  .search-bar input {
    flex: 1;
    padding: 5px;
    border: none;
    outline: none;
  }

  .cancel-button {
    margin-left: 5px;
    font-size: 14px;
    color: #999;
  }

  .search-icon {
    width: 20px;
    height: 20px;
    margin-left: 5px;
  }

  .search-history {
    margin-top: 10px;
  }

  .history-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .history-item {
    padding: 5px;
    border-bottom: 1px solid #eee;
    color: #333;
  }

  .clear-history {
    color: red;
    text-align: center;
    padding: 5px;
    font-size: 14px;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
  }

  .cct {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .iit {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: cover;
  }

  .primary {
    font-size: 10px;
    color: red;
    margin-top: 0px;
  }

  .money {
    font-size: 10px;
    border-radius: 5px;
    background-color: #7a76fa;
    color: cyan;
    margin-top: 5px;
  }
</style>